<template>
    <div class="home-page-main">
        <div class="home-title">
            <img src="../../assets/image/logo.c794a1a1.svg" alt="">
            <div class="right-icon">
                <img @click="category('/lang')" src="../../assets/image/zh.png" alt="">
                <van-icon name="arrow-down"/>
                <img @click="category('/message')" class="tips" src="../../assets/image/msg.png" alt="">
            </div>
        </div>
        <div class="home-search" @click="category('/search')">
            <div class="input-label">
                <img src="../../assets/image/search.png" alt="">
                找货源/商品/供应商/求购
            </div>
        </div>

        <div class="home-swipper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img class="image"
                         src="https://hetao-shop-test.s3.amazonaws.com/type/2023-07-12/b4914f1e-db30-4321-9b09-5ac0dc867ec2.png"
                         alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img class="image"
                         src="https://hetao-shop-test.s3.amazonaws.com/type/2023-07-12/402908f5-5446-4e85-a29e-f9de74d2d46c.png"
                         alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img class="image"
                         src="https://hetao-shop-test.s3.amazonaws.com/type/2023-07-12/68012fb5-c24c-4245-8f54-ef6c69477729.png"
                         alt="">
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="category-image">
            <div class="ks_daohang" :style="{ 'transform': 'translateX(' + currentOffset + 'px)' }">
                <div class="ks-item-image" @click="category('/category')" v-for="(item,index) in list" :key="index">
                    <div class="ks-item">
                        <div class="item-image">
                            <img :src="item.image"
                                 alt="">
                        </div>
                        <div class="item-nav">{{item.name}}</div>
                    </div>

                </div>
            </div>
        </div>

        <div class="category-title">每日上新</div>

        <div class="category-product">
            <div @click="category('goods')" class="ks_daohang" :style="{ 'transform': 'translateX(' + currentOffset + 'px)' }">
                <div class="ks-item-image" v-for="(item,index) in product" :key="index">
                    <div class="ks-item">
                        <div class="item-image">
                            <img :src="item.image"
                                 alt="">
                        </div>
                        <div class="item-nav">${{item.price}}</div>
                    </div>
                </div>
            </div>
        </div>

      <div class="category-title">推荐产品</div>

      <van-swipe :autoplay="3000" indicator-color="white" @change="onChange">
        <van-swipe-item v-for="(item,index) in parseInt(goods.length/4)" :key="index" >
          <div class="product-item" >
            <div v-for="(items,index1) in goods.slice((item-1)*4,item*4)" :key="index1" class="item">
              <img :src="items.image" alt="">
              <p class="item-price">$ {{items.price}}</p>
              <p class="item-sale">月销量 {{ items.sale }}</p>
              <p class="item-content"> {{ items.content }} </p>
            </div>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="dot">
            <div v-for="(item,index) in parseInt(goods.length/4)" :key="index" :class="{'active':index===current}" class="custom-indicator"/>
          </div>
        </template>
      </van-swipe>

      <div class="category-title">推荐店铺</div>

      <div class="shop-store">
        <div class="shop-item">
          <div class="shop-up">
            <img src="https://hetao-shop-test.s3.amazonaws.com/selle/2023-12-01/0b121c30-4d55-46df-92cd-e7e79fed7a83.jpg" alt="">
            <div class="box-right">
              <div class="left">
                <p class="shop-name">小八天烧烤店</p>
                <p class="shop-love">关注：80</p>
                <p class="shop-goods shop-love">商品：15</p>
              </div>
              <div class="right">
                <button @click="category('/store')"> 访问商店  > </button>
              </div>
            </div>
          </div>
          <div class="shop-bottom">
            <span>好评率: 72%</span>
            <span>卖出: 10,169</span>
          </div>
        </div>
        <div class="shop-item">
          <div class="shop-up">
            <img src="https://hetao-shop-test.s3.amazonaws.com/selle/2023-12-01/0b121c30-4d55-46df-92cd-e7e79fed7a83.jpg" alt="">
            <div class="box-right">
              <div class="left">
                <p class="shop-name">小八天烧烤店</p>
                <p class="shop-love">关注：80</p>
                <p class="shop-goods shop-love">商品：15</p>
              </div>
              <div class="right">
                <button> 访问商店  > </button>
              </div>
            </div>
          </div>
          <div class="shop-bottom">
            <span>好评率: 72%</span>
            <span>卖出: 10,169</span>
          </div>
        </div>
        <div class="shop-item">
          <div class="shop-up">
            <img src="https://hetao-shop-test.s3.amazonaws.com/selle/2023-12-01/0b121c30-4d55-46df-92cd-e7e79fed7a83.jpg" alt="">
            <div class="box-right">
              <div class="left">
                <p class="shop-name">小八天烧烤店</p>
                <p class="shop-love">关注：80</p>
                <p class="shop-goods shop-love">商品：15</p>
              </div>
              <div class="right">
                <button> 访问商店  > </button>
              </div>
            </div>
          </div>
          <div class="shop-bottom">
            <span>好评率: 72%</span>
            <span>卖出: 10,169</span>
          </div>
        </div>
        <div class="shop-item">
          <div class="shop-up">
            <img src="https://hetao-shop-test.s3.amazonaws.com/selle/2023-12-01/0b121c30-4d55-46df-92cd-e7e79fed7a83.jpg" alt="">
            <div class="box-right">
              <div class="left">
                <p class="shop-name">小八天烧烤店</p>
                <p class="shop-love">关注：80</p>
                <p class="shop-goods shop-love">商品：15</p>
              </div>
              <div class="right">
                <button> 访问商店  > </button>
              </div>
            </div>
          </div>
          <div class="shop-bottom">
            <span>好评率: 72%</span>
            <span>卖出: 10,169</span>
          </div>
        </div>
      </div>

      <div class="category-title">热销产品</div>

      <div class="product-item" >
        <div  @click="category('goods')" v-for="(items,index1) in goods" :key="index1" class="item">
          <img :src="items.image" alt="">
          <p class="item-price">$ {{items.price}}</p>
          <p class="item-sale">月销量 {{ items.sale }}</p>
          <p class="item-content"> {{ items.content }} </p>
        </div>
      </div>
      <Footer></Footer>
    </div>


</template>


<script>
  // import safeBottom from '@/components/saveBottom/index.vue'
  import Footer from '@/components/flooter/index.vue'
  import {getHomeBase} from "@/api/apiFox";
  import axios from "axios";
    export default {
        components:{Footer},
        data() {
            return {
              current: 0,
                list: [
                    {id: 1, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/f638f5c6-610e-4035-8a7d-1b49bd18a6ea.jpg', name: '饮品酒水'},
                    {id: 2, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/d80b2606-3bc7-47a2-bee9-d040619a34a6.jpg', name: '男士服装'},
                    {id: 3, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/40488675-237a-40d9-b2d3-e5d53b0e6455.jpg', name: '女士服装'},
                    {id: 4, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-04-14/d26d36b6-6435-4071-a1ed-647cf4e9214b.png', name: '零食甜点'},
                    {id: 5, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-04-14/fb09769f-95b0-4418-bc5a-8f91952ddf75.png', name: '休闲渔具'},
                    {id: 6, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/bfa34439-cd8b-4b7c-b849-8cd85c7b6a33.jpg', name: '手机配件'},
                    {id: 7, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/f638f5c6-610e-4035-8a7d-1b49bd18a6ea.jpg', name: '防疫物品'},
                    {id: 8, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/f638f5c6-610e-4035-8a7d-1b49bd18a6ea.jpg', name: '办公文具'},
                    {id: 9, image: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/f638f5c6-610e-4035-8a7d-1b49bd18a6ea.jpg', name: '电脑配件'},
                ],
                product:[
                    {id:1,price:10,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:2,price:120,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:3,price:102,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:4,price:102,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:5,price:110,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:6,price:110,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:7,price:101,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                    {id:8,price:110,image:'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg'},
                ],
                goods:[
                  {id:1,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.11,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:2,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.12,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:3,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.13,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:4,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.14,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:5,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.15,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:6,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.16,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:7,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.17,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                  {id:8,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.18,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
                ],
                currentIndex: 0,
                autoPlayInterval: null
            }
        },
        computed: {
            currentOffset() {
                return -100 * this.currentIndex;
            }
        },
        methods:{
            category(item){
                this.$router.push(item).catch(err=>{})

            },
            nextItem() {
                if (this.currentIndex < this.list.length - 3) {
                    this.currentIndex += 1;
                } else {
                    this.currentIndex = 0;
                }
            },
            startAutoPlay() {
                this.autoPlayInterval = setInterval(this.nextItem, 3000);
            },
            onChange(index) {
              this.current = index;
            },
            stopAutoPlay() {
                if (this.autoPlayInterval) {
                    clearInterval(this.autoPlayInterval);
                }
            }
        },
        mounted() {
            this.startAutoPlay();
            this.$once('hook:beforeDestroy', this.stopAutoPlay);
            getHomeBase().then(res=>{
              console.log(res)
            })
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/base/index";

    .home-page-main {
        width: 100%;
        padding: 0 3%;
        box-sizing: border-box;

        .home-title {
            width: 100%;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                height: 22px;
            }

            .right-icon {
                font-size: 12px;
                color: #aaaaaa;
                display: flex;
                align-items: center;
                img {
                    height: 22px;
                  margin-right: 2px;
                }

                .tips {
                  height: 21px;
                    margin-left: 10px;
                }
            }
        }

        .home-search {
            width: 100%;
            margin-top: 25px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;

            .input-label {
                width: 100%;
                height: 45px;
                border-radius: 45px;
                background: #f6f6f6;
                font-size: 14px;
                color: #999;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    margin-right: 5px;
                    height: 16px;
                }
            }
        }

        .home-swipper {
            width: 100%;
            height: 180px;

            .image {
                width: 100%;
                height: 168px;
                border-radius: 10px;
            }
        }
        ::-webkit-scrollbar{
          width: 0;
        }
        .category-image {
            width: 100%;
            height: 150px;
            margin-top: 30px;
            display: flex;
          //background: red;
            overflow-x: scroll;
            overflow-y: hidden;
            position: relative;
            .ks_daohang{
                display: flex;
                transition: transform 0.5s ease;
                .ks-item-image {
                    height: 150px;
                    width: 100%;
                    /*flex-shrink: 0;*/
                    /*background: #f6f6f6;*/
                    .ks-item{
                        width: 100px;
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        align-items: center;
                        .item-image {
                            width: 90px;
                            height: 80px;
                            border: 1px solid #f6f6f6;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            img {
                                height: 72px;
                                width: 72px;
                            }
                        }

                        .item-nav {
                            width: 100%;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            font-size: 12px;
                            margin-top: 8px;
                        }
                    }

                }
            }

        }
        .category-title{
            height: 20px;
            width: 100%;
            font-size: 14px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .category-product{
            width: 100%;
            display: flex;
            overflow-x: scroll;
            overflow-y: hidden;
            position: relative;
            .ks_daohang{
                display: flex;
                transition: transform 0.5s ease;
                .ks-item-image {

                    width: 100%;
                    .ks-item{
                        width: 100px;
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        align-items: center;
                        .item-image {
                            width: 132px;
                            height: 132px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            img {
                                height: 120px;
                                width: 80px;
                            }
                        }

                        .item-nav {
                            width: 100%;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            font-size: 14px;
                            margin-top: 8px;
                            color: #002FFF;
                            font-weight: 500;
                        }
                    }
                }
            }
        }

        .shop-store{
          width: 100%;
          .shop-item{
            width: 100%;
            min-height: 100px;
            border: 1px solid #f6f6f6;
            border-radius: 8px;
            margin-bottom: 15px;
            padding: 2% 3%;
            box-sizing: border-box;
            .shop-up{
              width: 100%;
              display: flex;
              padding: 0 0 15px 0;
              justify-content: space-between;
              border-bottom: 1px solid #f6f6f6;
              img{
                width: 60px;
                height: 60px;
                border-radius: 50%;
              }
              .box-right{
                width: 80%;
                height: 60px;
                display: flex;
                align-items: center;

                .left{
                  width: 80%;
                  padding: 0 0 0 15px;
                  box-sizing: border-box;
                  .shop-name{
                    font-size: 16px;
                    margin: 5px 0;
                  }
                  .shop-love{
                    font-size: 12px;
                    color: #999999;
                  }
                }
                .right{
                  width: 100px;
                  height: 60px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  button{
                    height: 24px;
                    padding: 5px 10px;
                    border-radius: 24px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    border: none;
                    background: #002FFF;
                    color: #fff;
                    font-size: 12px;
                    white-space: nowrap;
                  }
                }
              }
            }
            .shop-bottom{
              width: 100%;
              display: flex;
              margin-top: 5px;
              justify-content: space-between;
              align-items: center;
              span{
                font-size: 10px;
                color: #999;

              }
            }
          }
        }

        .product-item{
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .item{
            margin-bottom: 10px;
            width: 160px;
            min-height: 220px;
            padding: 6px;
            border: 1px solid #f6f6f6;
            img{
              width: 160px;
              height: 160px;
            }
            .item-price{
              margin-top: 10px;
              width: 100%;
              color: #002FFF;
              font-size: 16px;
              font-weight: 500;
            }
            .item-sale{
              width: 100%;
              color: #999;
              font-size: 10px;
              margin: 5px 0;
            }
            .item-content{
              width: 100%;
              color: #000;
              font-size: 14px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              box-orient: vertical;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .dot{
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 10px;
          .custom-indicator{
            margin: 0 3px;
            width: 13px;
            height: 2px;
            background: #999;
          }
          .active{
            background: #002FFF;
          }
        }

    }
</style>
